<template>
    <div class="content">
        <img
            class="question"
            v-if="questionList.length > 0"
            src="@/static/images/reserve/question.png"
        />
        <div class="question-item" v-for="(item, index) in questionList" :key="item.title">
            <u-collapse :value="index === 0 ? [item.title] : []">
                <u-collapse-item :title="item.title" :name="item.title">
                    <div class="u-collapse-content" v-html="item.content"></div>
                </u-collapse-item>
            </u-collapse>
        </div>
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无常见问题</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'question',
    data() {
        return {
            id: null,
            questionList: [],
            empty: false,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        this.getQuestionList();
    },
    methods: {
        getQuestionList() {
            this.$Api.study.question
                .list({
                    studyhallId: this.id,
                })
                .then(res => {
                    this.questionList = res;
                    if (res.length === 0) {
                        this.empty = true;
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    @include flexBox(center, center, column);
    .question {
        width: 690rpx;
        height: 154rpx;
    }
    .question-item {
        width: 690rpx;
        margin-top: 20rpx;
        background: #fff;
        border-radius: 20rpx;
    }
}
::v-deep .u-collapse {
    /*.u-collapse-item {*/
    /*padding: 0 30rpx;*/
    /*.u-cell__body {*/
    /*padding: 30rpx 0 20rpx;*/
    /*}*/
    /*.u-collapse-item__content__text {*/
    /*padding: 30rpx 0;*/
    /*}*/
    /*}*/
    .u-line {
        border: none !important;
    }
    .u-collapse-item__content {
        border-top: 1rpx solid #f1f1f1;
    }
    .u-cell__title-text {
        font-weight: 600;
        font-size: 28rpx;
        color: #2f2f2f;
    }
    .u-collapse-content {
        font-size: 28rpx;
        color: #2f2f2f;
        line-height: 44rpx;
    }
}
</style>
